<template>
	<div>
		<el-button type="primary" @click="startExercise">开始练习</el-button>
		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column prop="name" label="练习名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="subjectNum" label="题目数量" width="80"></el-table-column>
			<el-table-column prop="exercisesAccuracy" label="正确率" width="80">
				<template slot-scope="{ row }">
					{{ getPercent(row.exercisesAccuracy, row.subjectNum) }}
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="练习时间" width="180"></el-table-column>
			<el-table-column label="操作" width="180">
				<template slot-scope="{ row }">
					<el-button-group>
						<el-button type="success" size="mini" @click="handlePreview(row)">查看详情</el-button>
						<el-button type="danger" size="mini" @click="handleDelect(row)">删除</el-button>
					</el-button-group>
				</template>
			</el-table-column>
			<div slot="empty" class="emptyBg">
				<el-empty :image-size="200"></el-empty>
			</div>
		</el-table>
		<Pagination v-show="parseInt(pageObj.count) > 0" :total="parseInt(pageObj.count)" @change="getList" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
		<RegularExerciseSet />
	</div>
</template>
<script>
import ExerciseSetMixin from './ExerciseSetMixin';
export default {
	mixins: [ExerciseSetMixin],
	components: {
		RegularExerciseSet: () => import('./RegularExerciseSet.vue')
	},
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 10,
				exercisesType: '1',
				createBy: this.$store.getters.userId
			}
		};
	},
	mounted() {
		this.getList();
		this.$bus.$on('refreshRegularExerciseList', this.getList);
	},
	beforeDestroy() {
		this.$bus.$off('refreshRegularExerciseList');
	},
	methods: {
		startExercise() {
			this.$bus.$emit('showDialogRegularExerciseSet');
		}
	}
};
</script>
